<template>
	<view class="task">
		<view class="head_box"></view>
		<view class="menu_box">
			<view class="menu">
				<view class="nav">
					<view>
						<view class="label">总收益</view>
						<view class="val">{{infoProfit.totalIncome}}</view>
					</view>
				</view>
				<view class="hr"></view>
				<view class="nav">
					<view>
						<view class="label">本日收益</view>
						<view class="val">{{infoProfit.todayIncome}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="team_box">
			<view class="card">
				<view class="teamListTitle">日常任务</view>
				<view v-if="taskList.length > 0">
					<tui-list-view backgroundColor="#fff">
						<tui-list-cell v-for="(item,index) in taskList" :key="index">
							<view class="teamList">
								<view class="label">
									<view class="img">
										<image src="../../../static/images/index/gg_icon.png" mode="widthFix" class="head"></image>
									</view>
									<view class="text">
										<view class="h1">{{item.title}}</view>
										<view class="h2" v-if="item.advertIncome">收益+{{item.advertIncome}}</view>
									</view>
								</view>
								<view class="val">
									<view class="text">
										<view class="btn" style="background: linear-gradient(90deg, #F4B73C, #FF9600);"
											@click="doTask" v-if="item.isReceive == null" :data-value="item.advertId">
											做任务</view>
										<view class="btn" style="background: #34c724;" v-else-if="item.isReceive == 0"
											@click="doIncome" :data-value="item.advertRecordId">领 取</view>
										<view v-else>
											<view class="btn" v-if="item.pictureView" style="background: #3470ff;"
												@click="doPreview(item.advertId)">预览</view>
											<view class="btn" v-else style="background: #EAE9E8;color: #F4B73C;">已领取</view>
										</view>
									</view>
								</view>
							</view>
						</tui-list-cell>
					</tui-list-view>
				</view>
				<view v-else-if="taskList.length == 0">
					<tui-no-data style="margin-top: 300rpx;" imgUrl="/static/images/mall/my_course_empty.png">暂无数据</tui-no-data>
				</view>
			</view>
		</view>
		<!--加载loadding-->
		<tui-loadmore v-if="loadding" :index="3" type="red"></tui-loadmore>
		<tui-nomore v-if="!pullUpOn" backgroundColor="#f7f7f7"></tui-nomore>
		<!--加载loadding-->
		<!-- 产品详情 -->
		<view class="detail_bg" v-if="isPreview">
			<view class="detail">
				<view class="cont">
					<image :src="pictureUrl" mode="widthFix" class="img"></image>
				</view>
				<view class="btn_box">
					<view @click="closePreview" class="btn">
						关闭
					</view>
					<view @click="saveUrl" class="btn" style="border-left: 1px solid #e5e5e5;color: forestgreen;">
						保存
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const util = require("@/utils/util.js")
	const app = getApp()
	import AD from '@/utils/ad.js'
	export default {
		name: '',
		components: {

		},
		props: {

		},
		data() {
			return {
				taskList: [], // 任务列表
				infoProfit: {}, // 收益数据
				isPreview: false, // 预览层
				pictureUrl: "", // 预览层图片

				advertId: "",
				advertVis: false,

				current: 1,
				pages: '',
				loadding: false,
				pullUpOn: true,
			};
		},
		computed: {

		},
		watch: {

		},
		onReady() {
			AD.load({
        adpid: 1732638922,
        adType: "RewardedVideo"
      });
		},
		onLoad() {
			this.getList();
			this.getProfit();
		},
		onShow() {

		},
		onPullDownRefresh: function() {
			this.current = 1;
			this.pullUpOn = true;
			this.loadding = false;
			this.getProfit();
			this.getList();
			uni.stopPullDownRefresh();
		},
		onReachBottom: function() {
			this.loadding = true;
			if (this.current == this.pages) {
				this.loadding = false;
				this.pullUpOn = false;
			} else {
				this.getList(true);
				this.loadding = false;
			}
		},
		methods: {
			// 任务列表
			getList(selet_type) {
				let that = this;
				let loadData;
				that.pullUpOn = true;
				if (selet_type) {
					loadData = JSON.parse(JSON.stringify(that.taskList));
					that.current = that.current + 1;
				}
				util.request('adv/list', {
					current: that.current
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						that.taskList = res.data.records
						that.pages = res.data.pages
						if (selet_type) {
							that.taskList = loadData.concat(res.data.records);
						}
					}
				});
			},
			// 收益数据
			getProfit() {
				util.request('adv/getAdvIncome').then(res => {
					if (res.code == 0) {
						this.infoProfit = res.data
					}
				});
			},
			// 做任务
			doTask(e) {
				this.advertId = e.currentTarget.dataset.value;
				this.showRewardedVideoAd();
			},
			// 激励视频广告
			showRewardedVideoAd() {
				let _this = this;
        // 调用后会显示 loading 界面
        AD.show({
          adpid: 1732638922, // HBuilder 基座测试广告位
          adType: "RewardedVideo",
          //singleton: false // 设置此参数后，每次调用 show 方法将重新创建广告实例，预载将失效，如果广告回调每次要透传用户信息需要设置 false
        }, (res) => {
          // 用户点击了【关闭广告】按钮
          if (res && res.isEnded) {
            // 正常播放结束
            // console.log("onClose " + res.isEnded);
						if (_this.advertId) {
							_this.advertClick();
						}
          } else {
            // 播放中途退出
            // console.log("onClose " + res.isEnded);
						util.toast('中途退出将没有奖励');
          }
          // 在此处理服务器回调逻辑
        }, (err) => {
          // 广告加载错误
          console.log(err)
					util.toast('广告加载失败');
        })
      },
			advertClick() {
				util.request('adv/doTask', {
					advertId: this.advertId
				}, 'POST').then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.current = 1;
						this.getList();
						this.getProfit();
					}
				});
			},
			// 领取
			doIncome(e) {
				let value = e.currentTarget.dataset.value;
				util.request('adv/getIncome', {
					advertRecordId: value
				}, 'POST').then(res => {
					// console.log(res);
					if (res.code == 0) {
						this.current = 1;
						this.getList();
						this.getProfit();
					}
				});
			},
			// 预览
			doPreview(id) {
				util.request('adv/getAdvPicture', {
					advertId: id
				}, 'POST').then(res => {
					console.log(res);
					if (res.code == 0) {
						this.openPreview();
						this.pictureUrl = res.data.pictureUrl
					}
				});
			},
			// 打开预览层
			openPreview() {
				this.isPreview = true;
			},
			// 关闭预览层
			closePreview() {
				this.isPreview = false;
			},
			// 保存图片到本地
			saveUrl() {
				let _this = this;
				uni.downloadFile({
					url: _this.pictureUrl, // 这里是我已经请求好的图片数据
					success: (res) => {
						console.log(res, 'res')
						var tempFilePath = res.tempFilePath;
						uni.saveImageToPhotosAlbum({ // 然后调用这个方法
							filePath: tempFilePath,
							success: (res) => {
								uni.showToast({
									title: '图片已保存'
								})
								setTimeout(() => {
									_this.closePreview();
								}, 2000)
							}
						})
					},
					fail: () => {
						uni.showToast({
							title: '图片保存失败'
						})
					}
				});
			}
		},
	};
</script>

<style lang="scss">
	.task {
		.team_box {
			padding: 20rpx 30rpx;
			.card {
				border-radius: 20rpx;
				overflow: hidden;
			}
		}
		.head_box {
			width: 100%;
			height: 160rpx;
			position: relative;
			z-index: 0;
			background: linear-gradient(155deg, #FEBB5C, #FDCC89);
		}
		.menu_box {
			padding: 0 30rpx;
			position: relative;
			z-index: 1;
			margin-top: -80rpx;
			
			.menu {
				background: #fff;
				width: 100%;
				display: flex;
				align-items: center;
				border-radius: 16rpx;
				
				.nav {
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
					height: 130rpx;
					text-align: center;
		
					.label {
						font-size: 26rpx;
						color: #666666;
					}
		
					.val {
						font-size: 36rpx;
						font-weight: bold;
						color: #111111;
					}
				}
				.hr {
					width: 2rpx;
					height: 40rpx;
					background: #EAE9E8;
				}
			}
		}

		.teamListTitle {}

		.teamList {
			.label {
				.img {
					width: 80rpx;
					height: 80rpx;
					border: none;
					margin: 0 20rpx 0 0;
					background: #FFF9E9;
				}
				.h1 {
					max-width: 360rpx;
				}
			}
			.val {
				flex-shrink: 0;
			}
			.btn {
				padding: 10rpx 30rpx;
			}

			.btnA {
				background: gray;
			}
		}
		.detail_bg {
			width: 100vw;
			height: 100vh;
			background-color: rgba(0, 0, 0, .6);
			position: fixed;
			left: 0;
			top: 0;
			z-index: 100;
		
			.detail {
				width: 600rpx;
				background: #fff;
				border-radius: 16rpx;
				overflow: hidden;
				padding: 30rpx 30rpx 120rpx;
				position: absolute;
				top: 50%;
				left: 50%;
				margin-left: -300rpx;
				transform: translateY(-50%);
		
				.cont {
					width: 100%;
					max-height: 70vh;
					overflow-y: auto;
		
					.img {
						display: block;
						width: 100%;
					}
				}
		
				.btn_box {
					width: 100%;
					height: 100rpx;
					display: flex;
					position: absolute;
					left: 0;
					bottom: 0;
					border-top: 1px solid #e5e5e5;
		
					.btn {
						flex: 1;
						line-height: 100rpx;
						text-align: center;
						color: #666;
						font-size: 32rpx;
					}
				}
			}
		}
	}
</style>
